<template>
  <view class="search-view">
    <view class="header">
      <view class="fanhui_betn" @click="backHandler()">
        <image src="/static/shouye/容器@1x.png" class="img_fanbtn"></image>
      </view>
      <view class="input_text">
        <input
          type="text"
          placeholder="请输入搜索内容"
          v-model="keywords"
        />
      </view>
      <view
        class="fanhui_betns"
        @click="searchHandler()"
      >
        <image
          src="/static/shouye/组 348@1x.png"
          style="width: 100%; height: 100%"
        ></image>
      </view>
    </view>
    <view class="data-box">
      <view v-for="item in searchList" :key="item.id" class="data-item">
        <view class="poi-name" @click="clickItemHandler(item)">{{item.buildName || item.streetName}}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { keywordSearch } from './../../pages/home/api/index'
export default {
  name: 'SearchView',
  props: {},
  mounted() {},
  methods: {},
  data() {
    return {
      keywords:'',
      searchList:[]
    }
  },
  methods: {
    backHandler() {
      this.$emit('close')
    },
    searchHandler() {
     keywordSearch({ keyword: this.keywords}).then(res => {
      if(res.code == 0){
        const streets = res.data.streets || []
        const buildings = res.data.buildings || []
        this.searchList = [...streets, ...buildings]
      }
      console.log(res)
    })
    },
    clickItemHandler(item) {
      if(item.buildName){
				uni.setStorageSync('btn', JSON.stringify(item))
				uni.navigateTo({
					url: '/pages/home/homedetail?id='+item.buildId
				})
      }else if(item.streetName){
        uni.navigateTo({
					url: '/pages/home/home?name=' + item.streetName
				})
      }
    },
  },
}
</script>

<style scoped lang="scss">
.search-view {
  display: flex;
  flex-direction: column;
  background: #fff;
  height: 100vh;
  .fanhui_betn {
		width: 76rpx;
		height: 76rpx;
		background: #fff;
		border-radius: 10rpx;
    margin: 10rpx;
    display: flex; 
    justify-content: center;
    align-items: center;
	}

	.img_fanbtn {
		width: 32rpx;
		height: 32rpx;
	}

  .fanhui_betns {
    width: 100rpx;
    height: 100rpx;
    border-radius: 10rpx;
    margin: 10rpx;
  }

  .header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F4F5F9;
    .input_text{
		  height: 50rpx;
      display: flex;
      flex: 1;
      width: 100%;
      border: 1px solid #E5E5E5;
      padding: 12rpx;
      margin: 10rpx;
      border-radius: 10rpx;
    }
  }
  .data-box {
    flex: 1;
    overflow-y: auto;
    .data-item{
      border-bottom: 2rpx solid #E5E5E5;
    }
    .poi-name{
      color: #3D3D3D;
      font-size: 26rpx;
      padding: 32rpx 40rpx;
    }
  }
}
</style>
